<template>
  <div>
    <slotable :list="list">
      <!-- <template #btn="obj">
        <button>查看</button>
        <button @click="del(obj.obj.id)">删除</button>
      </template> -->

      <!-- <template slot="btn" slot-scope="obj">
        <button>查看</button>
        <button @click="del(obj.obj.id)">删除</button>
      </template> -->
      <!--获取slot循环传过来数组对应每一项的内容-->
      <template v-slot:btn="obj">
        <!--1.创建点击事件,点击查看数据-->
        <button @click="chalook(obj.obj)">编辑</button>
        <button @click="del(obj.obj.id)">删除</button>
        <button @click="add">添加</button>
      </template>
    </slotable>

    <!--对话框组件-->
    <dialog1 :title="title" :flag="flag">
      <form>
        <!-- 姓名:<input type="text" :value="fromdata.name" /> 年龄:<input
          type="text"
          :value="fromdata.age"
        /> -->

        姓名:<input type="text" v-model="fromdata.name" /> 年龄:<input
          type="text"
          v-model="fromdata.age"
        />
        <div>
          <button @click="changeflag">取消</button>
          <button @click="queren">确认</button>
        </div>
      </form>
    </dialog1>
  </div>
</template>
<script>
import slotable from './slot/slotTable.vue'
import dialog1 from './slot/dialog.vue'
export default {
  name: '',
  components: { slotable, dialog1 },
  data () {
    return {
      list: [
        { id: 1, name: '赵云', age: 18 },
        { id: 2, name: '关羽', age: 25 },
        { id: 3, name: '张飞', age: 26 },
      ],
      flag: false,
      title: '编辑',
      fromdata: {}

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    //1.点击删除,调用函数删除
    del (id) {
      this.list = this.list.filter(item => item.id !== id)
    },

    //2.点击编辑,打开编辑对话框
    chalook (obj) {
      console.log(obj);
      this.flag = true
      this.fromdata = JSON.parse(JSON.stringify(obj))
      // this.fromdata = obj
    },
    //3.点击取消,移除对话框
    changeflag () {
      this.flag = false
    },
    //4.编辑确认按钮
    queren () {
      //找出原数据list和点击编辑中的fromdata相同ID的那一项数据
      let obj = this.list.find(item => item.id === this.fromdata.id)
      console.log(obj);
      //重新赋予最新的文本框的值
      obj.name = this.fromdata.name
      obj.age = this.fromdata.age
      this.flag = false
    },
    //5.点击添加
    add () {
      this.flag = true
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
